<template>
	<view class="cert-container">
		<!-- 证书选择下拉框 -->
		<view class="select-section">
			<view class="select-box" @tap="toggleDropdown">
				<text>{{ selectedCert ? selectedCert.title : '选择医学证书类型' }}</text>
				<text class="arrow" :class="{ 'arrow-up': showDropdown }">▼</text>
			</view>

			<!-- 下拉列表 -->
			<view v-if="showDropdown" class="dropdown-list">
				<view v-for="(cert, index) in certificates" :key="index" class="dropdown-item"
					@tap="selectCertificate(cert)">
					{{ cert.title }}
				</view>
			</view>
		</view>

		<!-- 证书详情信息 -->
		<view v-if="selectedCert" class="cert-details">
			<!-- 证书标题 -->
			<view class="cert-title">
				{{ selectedCert.title }}
				<view class="title-line"></view>
			</view>

			<!-- 报名时间 -->
			<view class="info-section">
				<view class="info-title">报名时间</view>
				<view class="info-content" @tap="showRegistrationDetail">
					{{formatDate(selectedCert.registrationTime) }}
				</view>
			</view>

			<!-- 考试介绍 -->
			<view class="info-section">
				<view class="info-title">考试介绍</view>
				<view class="info-content" @tap="showExamIntro">
					{{ selectedCert.examIntroduction }}
				</view>
			</view>

			<!-- 考试大纲 -->
			<view class="info-section">
				<view class="info-title">考试大纲</view>
				<view class="info-content" @tap="showExamOutline">
					{{ selectedCert.examSyllabus }}
				</view>
			</view>

			<!-- 考试日程 -->
			<view class="info-section">
				<view class="info-title">考试日程</view>
				<view class="info-content" @tap="showSchedule">
					{{formatDate(selectedCert.examSchedule)}}
				</view>
			</view>

			<!-- 真题下载 -->
			<view class="info-section">
				<view class="info-title">真题下载</view>
				<view class="info-content download-link" @tap="handleDownload(selectedCert.pastPapersDownload)">
					点击下载历年真题
				</view>
			</view>

			<!-- 考试常见问题 -->
			<view class="info-section">
				<view class="info-title">医考百问</view>
				<view class="info-content" @tap="showFAQ">
					查看常见问题解答
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCertList
	} from "@/api/index.js"
	import formatDateString from '../../common/date.js'
	export default {
		data() {
			return {
				showDropdown: false,
				selectedCert: null,
				certificates: [{
						name: '执业医师资格证书',
						registrationTime: '2024年2月1日-2月28日',
						introduction: '点击查看考试介绍详情',
						outline: '点击查看考试大纲详情',
						schedule: '2024年6月',
						downloadUrl: ''
					},
					{
						name: '执业护士资格证书',
						registrationTime: '2024年3月1日-3月31日',
						introduction: '点击查看考试介绍详情',
						outline: '点击查看考试大纲详情',
						schedule: '2024年5月',
						downloadUrl: ''
					}
				]
			}
		},
		async onLoad() {
			let res = await getCertList()
			this.certificates = res.data.data
			this.selectedCert = this.certificates[0]
			console.log(res.data.data, '???????????????');
		},
		computed: {
			formatDate() {
				return (value) => {
					return formatDateString(value)
				}
			}
		},
		methods: {
			toggleDropdown() {
				this.showDropdown = !this.showDropdown
			},

			selectCertificate(cert) {
				this.selectedCert = cert
				this.showDropdown = false
			},

			showRegistrationDetail() {
				uni.showToast({
					title: '暂无相关内容',
					icon: 'none'
				})
			},

			showExamIntro() {
				uni.showToast({
					title: '暂无相关内容',
					icon: 'none'
				})
			},

			showExamOutline() {
				uni.showToast({
					title: '暂无相关内容',
					icon: 'none'
				})
			},

			showSchedule() {
				uni.showToast({
					title: '暂无相关内容',
					icon: 'none'
				})
			},

			handleDownload(url) {
				uni.setClipboardData({
					data: 'http://localhost:3000/'+url, //data是需要复制的数据
					showToast: false, //配置是否弹出提示，默认弹出提示
					success: function() {
						console.log('success'); //复制成功的回调函数
						uni.showToast({
							title: '已复制真题链接',
							icon: 'none'
						})
					},
					fail: function() {
						console.log('fail'); //复制失败的回调函数
					},
					complete: function() {
						console.log('complete'); //接口调用结束的回调函数（调用成功、失败都会执行）
					},
				})
			},

			showFAQ() {
				uni.showToast({
					title: '暂无相关内容',
					icon: 'none'
				})
			}
		},

	}
</script>

<style>
	.cert-container {
		padding: 30rpx;
		background: #f8f8f8;
		min-height: 100vh;
	}

	.select-section {
		position: relative;
		margin-bottom: 30rpx;
	}

	.select-box {
		background: #fff;
		padding: 20rpx 30rpx;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 2rpx solid #eee;
	}

	.arrow {
		font-size: 24rpx;
		color: #666;
		transition: transform 0.3s;
	}

	.arrow-up {
		transform: rotate(180deg);
	}

	.dropdown-list {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border: 2rpx solid #eee;
		border-top: none;
		border-radius: 0 0 8rpx 8rpx;
		z-index: 100;
	}

	.dropdown-item {
		padding: 20rpx 30rpx;
		border-bottom: 2rpx solid #eee;
	}

	.dropdown-item:last-child {
		border-bottom: none;
	}

	.cert-details {
		background: #fff;
		border-radius: 8rpx;
		padding: 30rpx;
	}

	.cert-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.title-line {
		height: 4rpx;
		background: #f0f0f0;
		margin-top: 20rpx;
	}

	.info-section {
		margin-bottom: 30rpx;
		padding: 20rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
	}

	.info-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.info-content {
		font-size: 32rpx;
		color: #333;
		padding: 10rpx 0;
	}

	.download-link {
		color: #4a90e2;
		text-decoration: underline;
	}

	/* 点击效果 */
	.info-content:active {
		opacity: 0.7;
	}

	.info-section:active {
		background: #f9f9f9;
	}
</style>